<template>
  <!-- 搜索 -->
  <div class="el-card">
    <div class="el-card__body">
      <!-- 搜索类型  -->
      <div class="flex">
        <el-icon><Search /></el-icon>
        <span class="view_header_title">筛选搜索</span>
      </div>
      <!-- 右侧按钮 -->
      <div>
        <el-button class="ml20" type="primary" @click="searchHandle"
          >查询搜索</el-button
        >
        <el-button class="query" @click="reset">重置</el-button>
      </div>
      <!-- 左侧搜索 -->
      <form>
        <div class="el-form-item">
          <label class="el-form-item__label">角色名称:</label>
          <div class="el-input el-input--small">
            <el-input
              type="text"
              placeholder="请输入角色名称"
              class="el-input__inner"
              v-model="form.keyword"
            />
          </div>
        </div>
      </form>
    </div>
  </div>

  <!-- 表格 -->
  <el-table :data="list" style="width: 100%" border table-layout="auto">
    <el-table-column prop="id" label="编号" width="180" />
    <el-table-column prop="pic" label="商品图片" width="180">
      <template #default="{ row }">
        <!-- 'fill' | 'contain' | 'cover' | 'none' | 'scale-down' -->
        <el-image style="height: 100px" :src="row.pic" fit="fill" />
      </template>
    </el-table-column>
    <el-table-column prop="subTitle" label="商品名称" width="180" />
    <el-table-column prop="price" label="价格/货号" />
    <el-table-column prop="loginTime" label="标签">
      <template #default="{ row }">
        <el-switch
          v-model="row.publishStatus"
          :active-value="1"
          :inactive-value="0"
          @change="switchStatus(row)"
        ></el-switch>
        <el-switch
          v-model="row.newStatus"
          :active-value="1"
          :inactive-value="0"
          @change="switchStatus(row)"
        ></el-switch>
        <el-switch
          v-model="row.verifyStatus"
          :active-value="1"
          :inactive-value="0"
          @change="switchStatus(row)"
        ></el-switch>
      </template>
    </el-table-column>
    <el-table-column prop="sort" label="排序" />
    <el-table-column prop="adminCount" label="SKU库存" />
    <el-table-column prop="sale" label="销量" />
    <el-table-column prop="adminCount" label="审核状态" />
    <el-table-column label="操作" class="color" width="220">
      <template #default="{ row }">
        <el-button
          text
          type="primary"
          @click="edit(row.id)"
          v-permission="'editRole'"
          >编辑</el-button
        >
        <el-button
          text
          type="primary"
          @click="edit(row.id)"
          v-permission="'editRole'"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <ElConfigProvider :locale="zhCn">
    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="pageSizeChangeHandle"
        @current-change="pageChangeHandle"
      />
    </div>
  </ElConfigProvider>
</template>
<script setup lang="ts">
import useTable from "@/hooks/useTable";
import { reactive } from "vue";
import { Search } from "@element-plus/icons-vue";
//api
import { getProductListApi } from "./Api/index";
//搜索
const form = reactive({
  keyword: "",
});
const {
  list,
  total,
  searchHandle,
  pageNum,
  pageSize,
  pageSizeChangeHandle,
  pageChangeHandle,
  zhCn,
} = useTable(getProductListApi, form);

const reset = () => {
  form.keyword = "";
  searchHandle();
};
//切换开关

//是否启用
const switchStatus = (row: IUserModel) => {
  // console.log(id, status);
  //   switchRoleStatusApi(row.id!, row.status)
  //     .then((res) => {
  //       console.log(res);
  //       if (res.code == 200) {
  //         ElMessage.success("修改成功");
  //       } else {
  //         row.status = row.status === 1 ? 0 : 1;
  //       }
  //     })
  //     .catch(() => {
  //       row.status = row.status === 1 ? 0 : 1;
  //     });
};
//编辑
const edit = (id: number) => {
  //   editId.value = id;
  //显示对话框
  //   isShowModel.value = true;
  //这里传item
};
</script>
<style lang="less" scoped>
.el-card {
  border-radius: 4px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  color: #303133;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  margin-bottom: 20px;
}
.el-card__body {
  padding: 20px;
}
.color {
  :deep(.el-button) {
    color: #409eff;
  }
}
.flex2 {
  display: flex;
  justify-content: space-between;
}
.view_header_title {
  padding-left: 10px;
  font-size: 16px;
}
.ml20 {
  margin-left: 20px;
  float: right;
}
.query {
  float: right;
}

form {
  padding: 20px 40px 0 0px;
}
.el-form-item {
  margin-bottom: 18px;
}
.item__label {
  margin-right: 10px;
}
.flex {
  display: flex;
  align-items: center;
}

.demo-pagination-block {
  :deep(.el-pagination) {
    float: right;
    margin: 20px 0;
  }
}
:deep(.cell) {
  text-align: center;
}
.el-card {
  :deep(.el-input) {
    height: 32px;
    width: 190px;
  }
}
</style>
